import React, { PureComponent } from 'react';
import { Card, Col, Row, Button, message, Icon, Popover, Select, Drawer } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import _ from 'lodash';
import moment from 'moment';
import router from 'umi/router';
import SupplyPlan from './components/SupplyPlan';
import ProjectDetailDrawer from './components/ProjectDetailDrawer';
import { handlerApprovalStatusColor } from '@/utils/publicFunction';
import { setSignPlanVersionName, setSignPlanAccessVersionName } from '@/utils/versions_name';
import Breadcrumb from './components/Breadcrumb';
import ProductTypeDetail from './components/ProductTypeDetail';
import styles from '../../index.less';
import { showConfirm } from '@/utils/utils';
import MyBasicInfo from '@/components/MyBasicInfo';

@connect(state => ({
  signDates: state.ContractPlanProductTypeDetail.signDates,
  initYear: state.ContractPlanProductTypeDetail.initYear,
  year: state.ContractPlanProductTypeDetail.year,
  month: state.ContractPlanProductTypeDetail.month,
  canSignRoomCount: state.ContractPlanProductTypeDetail.canSignRoomCount,
  canSignPrice: state.ContractPlanProductTypeDetail.canSignPrice,
  supplyPlanItems: state.ContractPlanProductTypeDetail.supplyPlanItems,
  contractPlanItems: state.ContractPlanProductTypeDetail.contractPlanItems,
  versionDetails: state.ContractPlanProductTypeDetail.versionDetails,
  signDetailProductDto: state.ContractPlanProductTypeDetail.signDetailProductDto,
  products: state.ContractPlanProductTypeDetail.products,
  projectProducts: state.ContractPlanProductTypeDetail.projectProducts,

  // versionState 版本状态
  // signFullName 签约计划版本全路径名称
  // supplyFullName 供货计划版本全路径名称
  currentUser: state.user.currentUser,
  orgStructure: state.orgStructure,
  versionInfo: state.ContractPlanDetailVersions,
  // loading: state.loading.models.items,
}))
export default class ContractPlan extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      okLoading: false,
    };
  }

  componentDidMount() {
    const { dispatch, match } = this.props;
    dispatch({
      type: 'ContractPlanDetailVersions/fetch',
      payload: {
        params: {
          versionId: match.params.version,
        },
      },
    });
    dispatch({
      type: 'ContractPlanProductTypeDetail/getProducts',
      payload: {
        params: {
          versionId: match.params.version,
        },
      },
    });
  }

  // 保存
  handleSavePrice = canSave => {
    this.setState({ okLoading: true });
    const { dispatch } = this.props;
    dispatch({
      type: 'ContractPlanProductTypeDetail/savePlans',
      payload: {
        params: {
          isEstablishment: canSave,
        },
        callback: response => {
          this.setState({ okLoading: false });
          if (response && response.code === 1) {
            message.success('保存成功', 1, () => {
              const { level1, level2, project, stage, version, category } = this.props.match.params;
              router.push(
                `/OperatingPlan/ContractPlan/${level1}/${level2}/${project}/${stage}/${category}/${version}`,
              );
            });
          }
        },
      },
    });
  };

  changeProduct = value => {
    showConfirm(
      () => {
        router.push(value);
      },
      '确定要取消编辑？',
      '取消后本次编辑内容将不保存。',
    );
  };

  getLastPlan = ({ signDates, contractPlanItems }) => {
    const year = _.last(signDates);
    const month = _.last(year.months);

    const planCurrentMonth = this.getPlan({
      contractPlanItems,
      year: year.key,
      month: month.key,
    });
    return planCurrentMonth;
  };

  getPlan = ({ contractPlanItems, year, month }) => {
    if (!contractPlanItems || contractPlanItems.length === 0) {
      return [];
    }
    const { isParking } = this.props;
    if (month === 13) {
      const initItem = {};
      const januaryItem = _.first(
        _.filter(contractPlanItems, item => item.year === year && item.month === 1),
      );
      if (!januaryItem) {
        return null;
      }
      const items = _.filter(contractPlanItems, item => item.year === year);
      const sumData = _.reduce(
        items,
        (sum, element) => {
          const tempSum = {
            supplyRoomCount: _.round(_.sum([sum.supplyRoomCount, element.supplyRoomCount]), 5),
            supplyCanSignRoomCount: _.round(
              _.sum([sum.supplyCanSignRoomCount, element.supplyCanSignRoomCount]),
              5,
            ),
            supplyRoomArea: _.round(_.sum([sum.supplyRoomArea, element.supplyRoomArea]), 4),
            supplySumPrice: _.round(_.sum([sum.supplySumPrice, element.supplySumPrice]), 4),
            statisticsSignRoomCount: _.round(
              _.sum([sum.statisticsSignRoomCount, element.statisticsSignRoomCount]),
              5,
            ),
            statisticsSignRoomArea: _.round(
              _.sum([sum.statisticsSignRoomArea, element.statisticsSignRoomArea]),
              4,
            ),
            statisticsSignSumPrice: _.round(
              _.sum([sum.statisticsSignSumPrice, element.statisticsSignSumPrice]),
              4,
            ),
          };
          return tempSum;
        },
        initItem,
      );
      // console.log(sumData, 'sumData');

      const supplyItem = {
        supplyRoomCount: sumData.supplyRoomCount,
        supplyCanSignRoomCount: sumData.supplyCanSignRoomCount,
        supplyRoomArea: sumData.supplyRoomArea,
        supplyAvgRoomArea:
          isParking === 1
            ? 0
            : sumData.supplyRoomCount === 0
            ? 0
            : _.round(sumData.supplyRoomArea / sumData.supplyRoomCount, 4),
        supplyAvgPrice:
          isParking === 1
            ? sumData.supplyRoomCount === 0
              ? 0
              : _.round(sumData.supplySumPrice / sumData.supplyRoomCount, 4)
            : sumData.supplyRoomArea === 0
            ? 0
            : _.round(sumData.supplySumPrice / sumData.supplyRoomArea, 4),
        supplySumPrice: sumData.supplySumPrice,
      };
      const statisticsItem = {
        statisticsSignRoomCount: sumData.statisticsSignRoomCount,
        statisticsSignRoomArea: sumData.statisticsSignRoomArea,
        statisticsSignAvgPrice:
          isParking === 1
            ? sumData.statisticsSignRoomCount === 0
              ? 0
              : _.round(sumData.statisticsSignSumPrice / sumData.statisticsSignRoomCount, 4)
            : sumData.statisticsSignRoomArea === 0
            ? 0
            : _.round(sumData.statisticsSignSumPrice / sumData.statisticsSignRoomArea, 4),
        statisticsSignSumPrice: sumData.statisticsSignSumPrice,
        roomCount: _.round(_.sum([januaryItem.earlyRoomCount, supplyItem.supplyRoomCount]), 5),
        canSignRoomCount: _.round(
          _.sum([januaryItem.earlyCanSignRoomCount, supplyItem.supplyCanSignRoomCount]),
          5,
        ),
        roomArea: _.round(_.sum([januaryItem.earlyRoomArea, supplyItem.supplyRoomArea]), 4),
        sumPrice: _.round(_.sum([januaryItem.earlySumPrice, supplyItem.supplySumPrice]), 4),
      };

      return [
        {
          key: 'early',
          name: '年初存货',
          editable: false,
          roomCount: januaryItem.earlyRoomCount,
          canSignRoomCount: null,
          roomArea: januaryItem.earlyRoomArea,
          avgRoomArea: januaryItem.earlyAvgRoomArea,
          avgPrice: januaryItem.earlyAvgPrice,
          sumPrice: _.toNumber(januaryItem.earlySumPrice / 10000),
          signRoomCount: null,
          signRoomArea: null,
          signAvgPrice: null,
          signSumPrice: null,
          isParking,
          errorSignRoomCount: false,
        },
        {
          key: 'supply',
          name: '年度新供',
          editable: false,
          roomCount: supplyItem.supplyRoomCount,
          canSignRoomCount: null,
          roomArea: supplyItem.supplyRoomArea,
          avgRoomArea: supplyItem.supplyAvgRoomArea,
          avgPrice: supplyItem.supplyAvgPrice,
          sumPrice: _.toNumber(supplyItem.supplySumPrice / 10000),
          signRoomCount: null,
          signRoomArea: null,
          signAvgPrice: null,
          signSumPrice: null,
          isParking,
          errorSignRoomCount: false,
        },
        {
          key: 'statistics',
          name: '年度合计',
          editable: false,

          roomCount: statisticsItem.roomCount,
          canSignRoomCount: statisticsItem.roomCount - statisticsItem.statisticsSignRoomCount,
          roomArea: statisticsItem.roomArea,
          sumPrice: _.toNumber(statisticsItem.sumPrice / 10000),
          avgRoomArea: Math.abs(
            isParking === 1
              ? null
              : statisticsItem.roomCount === 0
              ? 0
              : statisticsItem.roomArea / statisticsItem.roomCount,
          ),
          avgPrice: Math.abs(
            isParking === 1
              ? statisticsItem.roomCount === 0
                ? 0
                : statisticsItem.sumPrice / statisticsItem.roomCount
              : statisticsItem.roomArea === 0
              ? 0
              : statisticsItem.sumPrice / statisticsItem.roomArea,
          ),
          signRoomCount: statisticsItem.statisticsSignRoomCount,
          signRoomArea: statisticsItem.statisticsSignRoomArea,
          signAvgPrice: Math.abs(statisticsItem.statisticsSignAvgPrice),
          signSumPrice: _.toNumber(statisticsItem.statisticsSignSumPrice / 10000),
          isParking,
          errorSignRoomCount: false,
        },
      ];
    }

    const items = _.filter(contractPlanItems, item => item.year === year && item.month === month);
    let item = {};
    if (items && items.length > 0) {
      // eslint-disable-next-line prefer-destructuring
      item = items[0];
    } else {
      return [];
    }
    // 生成 state =》plan
    return [
      {
        key: 'early',
        name: '月初存货',
        editable: item.editable,
        roomCount: item.earlyRoomCount,
        canSignRoomCount: item.earlyCanSignRoomCount,
        roomArea: item.earlyRoomArea,
        avgRoomArea: item.earlyAvgRoomArea,
        avgPrice: item.earlyAvgPrice,
        sumPrice: _.toNumber(item.earlySumPrice / 10000),
        signRoomCount: item.earlySignRoomCount,
        signRoomArea: item.earlySignRoomArea,
        signAvgPrice: item.earlySignAvgPrice,
        signSumPrice: _.toNumber(item.earlySignSumPrice / 10000),
        isParking: item.isParking,
        errorSignRoomCount: item.errorEarlySignRoomCount,
      },
      {
        key: 'supply',
        name: '本月新供',
        editable: item.editable,
        roomCount: item.supplyRoomCount,
        canSignRoomCount: item.supplyCanSignRoomCount,
        roomArea: item.supplyRoomArea,
        avgRoomArea: item.supplyAvgRoomArea,
        avgPrice: item.supplyAvgPrice,
        sumPrice: _.toNumber(item.supplySumPrice / 10000),
        signRoomCount: item.supplySignRoomCount,
        signRoomArea: item.supplySignRoomArea,
        signAvgPrice: item.supplySignAvgPrice,
        signSumPrice: _.toNumber(item.supplySignSumPrice / 10000),
        isParking: item.isParking,
        errorSignRoomCount: item.errorSupplySignRoomCount,
      },
      {
        key: 'statistics',
        name: '本月合计',
        editable: item.editable,
        roomCount: item.statisticsRoomCount,
        canSignRoomCount: item.statisticsCanSignRoomCount,
        roomArea: item.statisticsRoomArea,
        avgRoomArea: item.statisticsAvgRoomArea,
        avgPrice: item.statisticsAvgPrice,
        sumPrice: _.toNumber(item.statisticsSumPrice / 10000),
        signRoomCount: item.statisticsSignRoomCount,
        signRoomArea: item.statisticsSignRoomArea,
        signAvgPrice: item.statisticsSignAvgPrice,
        signSumPrice: _.toNumber(item.statisticsSignSumPrice / 10000),
        isParking: item.isParking,
      },
    ];
  };

  showDrawer = () => {
    const { dispatch, match, month, signDates } = this.props;
    const self = this;
    self.setState({
      data1: [],
      data2: [],
    });
    dispatch({
      type: 'ContractPlanProductTypeDetail/getProjectProducts',
      payload: {
        params: {
          versionId: match.params.version,
        },
        callback: projectProductsx => {
          const projectProducts = _.cloneDeep(projectProductsx);
          let stateYear = this.props.year * 1;
          if (!stateYear) {
            stateYear = this.props.initYear * 1;
          }
          if (!projectProducts || projectProducts.length === 0) {
            return false;
          }
          const plan13 = self.getPlan({
            contractPlanItems: self.props.contractPlanItems,
            year: stateYear,
            month: 13,
          });
          const planNext13 = self.getPlan({
            contractPlanItems: self.props.contractPlanItems,
            year: stateYear + 1,
            month: 13,
          });
          const planCurrentMonth = self.getPlan({
            contractPlanItems: self.props.contractPlanItems,
            year: stateYear,
            month,
          });

          const planLast = self.getLastPlan({
            signDates,
            contractPlanItems: self.props.contractPlanItems,
          });

          // 通过版本id  和 code 从请求的数据里筛选出当前编辑的业态
          // currentItem 当前要替换的一项
          const currentCode = `${match.params.productCode}${match.params.businessType}${match.params.freeType}${match.params.proType}`;
          const currentVersionId = match.params.version;
          const groupId = match.params.group;
          const currentItem = _.first(
            _.filter(
              projectProducts,
              item =>
                item.versionId === currentVersionId &&
                item.code === currentCode &&
                item.groupId === groupId,
            ),
          );
          currentItem.count =
            planCurrentMonth && planCurrentMonth.length > 2 ? planCurrentMonth[2].signRoomCount : 0; // 当月签约套数
          currentItem.price =
            planCurrentMonth && planCurrentMonth.length > 2
              ? planCurrentMonth[2].signSumPrice * 10000
              : 0; // 当月签约金额

          currentItem.yearCount = plan13 && plan13.length > 2 ? plan13[2].signRoomCount : 0; // 当年签约套数
          currentItem.yearPrice = plan13 && plan13.length > 2 ? plan13[2].signSumPrice * 10000 : 0; // 当年签约金额

          currentItem.nextYearCount =
            planNext13 && planNext13.length > 2 ? planNext13[2].signRoomCount : 0; // 次年签约套数
          currentItem.nextYearPrice =
            planNext13 && planNext13.length > 2 ? planNext13[2].signSumPrice * 10000 : 0; // 次年签约金额
          currentItem.canCount = planLast && planLast.length > 2 ? planLast[2].canSignRoomCount : 0; // 剩余可签套数
          currentItem.canArea =
            planLast && planLast.length > 2 ? planLast[2].roomArea - planLast[2].signRoomArea : 0; // 剩余可签面积
          currentItem.canPrice =
            planLast && planLast.length > 2
              ? planLast[2].sumPrice * 10000 - planLast[2].signSumPrice * 10000
              : 0; // 剩余可签金额
          console.log(currentItem, '当前替换的一项');
          _.each(projectProducts, item => {
            item.title = (
              <>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{item.productName}+{item.businessTypeName}+
                {item.freeTypeName}+{item.proTypeName}
              </>
            );
          });
          let data1 = [];

          _.each(projectProducts, item => {
            data1.push({
              code: item.code,
              count: 0, // 当月签约套数
              price: 0, // 当月签约金额

              yearCount: 0, // 当年签约套数
              yearPrice: 0, // 当年签约金额

              nextYearCount: 0, // 次年签约套数
              nextYearPrice: 0, // 次年签约金额

              canCount: 0, // 剩余可签套数
              canArea: 0, // 剩余可签面积
              canPrice: 0, // 剩余可签金额
              isParking: null,
            });
          });
          _.each(projectProducts, item1 => {
            const currentData = _.first(_.filter(data1, item2 => item1.code === item2.code));
            if (currentData && currentData.code === item1.code) {
              currentData.title = item1.title;
              currentData.isParking = item1.isParking;
              currentData.count += _.toNumber(item1.count);
              currentData.price += _.toNumber(item1.price);
              currentData.yearCount += _.toNumber(item1.yearCount);
              currentData.yearPrice += _.toNumber(item1.yearPrice);
              currentData.nextYearCount += _.toNumber(item1.nextYearCount);
              currentData.nextYearPrice += _.toNumber(item1.nextYearPrice);
              currentData.canCount += _.toNumber(item1.canCount);
              currentData.canArea += _.toNumber(item1.canArea);
              currentData.canPrice += _.toNumber(item1.canPrice);
            }
          });

          const sumCount = (data, key) => {
            const homeData = _.filter(data, x => !x.isParking);
            const parkingData = _.filter(data, x => x.isParking);
            const parkingCount = parkingData.reduce((p, e) => p + e[key], 0);
            const homeCount = homeData.reduce((p, e) => p + e[key], 0);
            return `${homeCount.toFixed(2)}/${parkingCount.toFixed(2)}`;
          };

          // 项目合计
          const data1Totle = _.reduce(
            data1,
            (sum, n) => ({
              title: currentItem.projectName,
              count: sum.count + n.count,
              price: sum.price + n.price,

              yearCount: sum.yearCount + n.yearCount,
              yearPrice: sum.yearPrice + n.yearPrice,

              nextYearCount: sum.nextYearCount + n.nextYearCount,
              nextYearPrice: sum.nextYearPrice + n.nextYearPrice,

              canCount: sum.canCount + n.canCount,
              canArea: sum.canArea + n.canArea,
              canPrice: sum.canPrice + n.canPrice,
            }),
            {
              title: currentItem.projectName,
              count: 0, // 当月签约套数
              price: 0, // 当月签约金额

              yearCount: 0, // 当年签约套数
              yearPrice: 0, // 当年签约金额

              nextYearCount: 0, // 次年签约套数
              nextYearPrice: 0, // 次年签约金额

              canCount: 0, // 剩余可签套数
              canArea: 0, // 剩余可签面积
              canPrice: 0, // 剩余可签金额
            },
          );

          data1Totle.count = sumCount(data1, 'count');
          data1Totle.yearCount = sumCount(data1, 'yearCount');
          data1Totle.nextYearCount = sumCount(data1, 'nextYearCount');
          data1Totle.canCount = sumCount(data1, 'canCount');
          data1.forEach(val => {
            const x = val;
            x.count = x.count.toFixed(2);
            x.yearCount = x.yearCount.toFixed(2);
            x.nextYearCount = x.nextYearCount.toFixed(2);
            x.canCount = x.canCount.toFixed(2);
          });
          data1 = _.concat([data1Totle], _.unionBy(data1, 'code'));

          let data2 = [];
          _.each(projectProducts, item => {
            data2.push({
              versionId: item.versionId,
              code: item.code,
              count: 0, // 当月签约套数
              price: 0, // 当月签约金额

              yearCount: 0, // 当年签约套数
              yearPrice: 0, // 当年签约金额

              nextYearCount: 0, // 次年签约套数
              nextYearPrice: 0, // 次年签约金额

              canCount: 0, // 剩余可签套数
              canArea: 0, // 剩余可签面积
              canPrice: 0, // 剩余可签金额
              isParking: null,
            });
          });
          _.each(projectProducts, item1 => {
            const currentData = _.first(
              _.filter(
                data2,
                item2 => item1.code === item2.code && item1.versionId === item2.versionId,
              ),
            );
            if (
              currentData &&
              currentData.code === item1.code &&
              item1.versionId === currentData.versionId
            ) {
              currentData.title = item1.title;
              currentData.isParking = item1.isParking;
              currentData.count += _.toNumber(item1.count);
              currentData.price += _.toNumber(item1.price);
              currentData.yearCount += _.toNumber(item1.yearCount);
              currentData.yearPrice += _.toNumber(item1.yearPrice);
              currentData.nextYearCount += _.toNumber(item1.nextYearCount);
              currentData.nextYearPrice += _.toNumber(item1.nextYearPrice);
              currentData.canCount += _.toNumber(item1.canCount);
              currentData.canArea += _.toNumber(item1.canArea);
              currentData.canPrice += _.toNumber(item1.canPrice);
            }
          });
          const filterData2 = _.filter(data2, x => x.versionId === currentVersionId);

          const data2Totle = _.reduce(
            filterData2,
            (sum, n) => ({
              title: currentItem.stageName,
              count: sum.count + n.count,
              price: sum.price + n.price,

              yearCount: sum.yearCount + n.yearCount,
              yearPrice: sum.yearPrice + n.yearPrice,

              nextYearCount: sum.nextYearCount + n.nextYearCount,
              nextYearPrice: sum.nextYearPrice + n.nextYearPrice,

              canCount: sum.canCount + n.canCount,
              canArea: sum.canArea + n.canArea,
              canPrice: sum.canPrice + n.canPrice,
            }),
            {
              title: currentItem.stageName,
              count: 0, // 当月签约套数
              price: 0, // 当月签约金额

              yearCount: 0, // 当年签约套数
              yearPrice: 0, // 当年签约金额

              nextYearCount: 0, // 次年签约套数
              nextYearPrice: 0, // 次年签约金额

              canCount: 0, // 剩余可签套数
              canArea: 0, // 剩余可签面积
              canPrice: 0, // 剩余可签金额
            },
          );

          data2Totle.count = sumCount(filterData2, 'count');
          data2Totle.yearCount = sumCount(filterData2, 'yearCount');
          data2Totle.nextYearCount = sumCount(filterData2, 'nextYearCount');
          data2Totle.canCount = sumCount(filterData2, 'canCount');
          filterData2.forEach(val => {
            const x = val;
            x.count = x.count.toFixed(2);
            x.yearCount = x.yearCount.toFixed(2);
            x.nextYearCount = x.nextYearCount.toFixed(2);
            x.canCount = x.canCount.toFixed(2);
          });
          data2 = _.concat([data2Totle], _.unionBy(filterData2, 'code'));
          self.setState({
            data1,
            data2,
            currentItem,
            summaryYear: stateYear,
            month,
            visible: true,
          });
        },
      },
    });
    //
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  /**
   * @Descripttion: 生成版本信息数据
   * @param {*} versionInfo 当前版本信息
   * @return {*} object
   */
  setBasicInfoData = versionInfo => {
    const basicInfo = [
      {
        label: '版本名称',
        span: 2,
        value: setSignPlanVersionName(versionInfo),
      },
      {
        label: '创建人',
        value: versionInfo.createUser,
      },
      {
        label: '创建时间',
        value: moment(versionInfo.createTime).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        label: '创建方式',
        value: versionInfo.createMethodName,
      },
      {
        label: '更新时间',
        value: moment(versionInfo.updateTime || versionInfo.createTime).format(
          'YYYY-MM-DD HH:mm:ss',
        ),
      },
    ];
    const accessInfo = [
      {
        label: ['budget'].includes(versionInfo.versionType) ? '签约版本' : '供货版本',
        value: setSignPlanAccessVersionName(versionInfo),
      },
    ];

    return {
      basicInfo,
      accessInfo,
    };
  };

  render() {
    const self = this;
    const {
      versionInfo,
      signDetailProductDto,
      orgStructure,
      signDates,
      canSignRoomCount,
      canSignPrice,
    } = this.props;
    let canSave = canSignPrice !== null && canSignPrice === 0;
    if (canSave && signDates && signDates.lenght > 0) {
      signDates.forEach(elementYear => {
        if (elementYear.error) {
          elementYear.months.forEach(elementMonth => {
            if (elementMonth.editable && elementMonth.clickable && elementMonth.error) {
              canSave = false;
            }
          });
        }
      });
    }
    const { project, stage } = this.props.match.params;
    const { products } = this.props;
    const { props } = this;
    let projectName = '';
    if (!_.isEmpty(orgStructure.data)) {
      projectName = `${_.filter(orgStructure.data, { orgdepid: project })[0].orgname}(
        ${_.filter(orgStructure.data, { orgdepid: stage })[0].orgname})`;
    }
    const { data } = versionInfo;
    return (
      <div className={styles.contractPlan}>
        <PageHeaderWrapper
          breadcrumb={null}
          title={
            <Breadcrumb projectName={projectName} signDetailProductDto={signDetailProductDto} />
          }
        >
          <Card className="content-card">
            {/* 版本信息 */}
            <div className="content-card-body">
              <Row
                type="flex"
                justify="space-between"
                align="middle"
                style={{
                  marginBottom: 5,
                  borderBottom: '1px solid #e8e8e8',
                }}
              >
                <Col>
                  <Row type="flex" justify="space-between" align="middle">
                    <Col>
                      <Row type="flex" gutter={[20, 0]} align="middle">
                        <Col>{setSignPlanVersionName(data)}</Col>
                        <Col>
                          <span className="version-status" />
                          <i
                            className="dots"
                            style={{
                              background: handlerApprovalStatusColor(data.versionState),
                            }}
                          />
                          {data.versionState}
                        </Col>
                        <Col>
                          {/* 版本信息 */}
                          <MyBasicInfo data={this.setBasicInfoData(data)} />
                          {/* <Popover
                            content={this.editionDetail(data)}
                            title="版本信息"
                            trigger="hover"
                            placement="bottomLeft"
                          >
                            <Button style={{ color: '#4f84ff', border: 'solid 1px #fff' }}>
                              <Icon
                                type="snippets"
                                style={{
                                  color: '#fff',
                                  background: 'rgba(255, 141, 26, 1)',
                                }}
                              />
                            </Button>
                          </Popover> */}
                        </Col>
                        <Col>
                          <Select
                            onChange={this.changeProduct}
                            size="small"
                            value={`/OperatingPlan/ContractPlan/${props.match.params.level1}/${props.match.params.level2}/${props.match.params.project}/${props.match.params.stage}/${props.match.params.category}/${props.match.params.version}/${props.match.params.group}/${props.match.params.productCode}/${props.match.params.businessType}/${props.match.params.freeType}/${props.match.params.proType}/${props.match.params.pid}/edit`}
                            style={{ width: 400 }}
                          >
                            {products &&
                              products.length > 0 &&
                              products.map(data => (
                                <Select.Option
                                  key={`/OperatingPlan/ContractPlan/${props.match.params.level1}/${props.match.params.level2}/${props.match.params.project}/${props.match.params.stage}/${props.match.params.category}/${props.match.params.version}/${data.groupId}/${data.productCode}/${data.businessType}/${data.freeType}/${data.proType}/${data.pid}/edit`}
                                  value={`/OperatingPlan/ContractPlan/${props.match.params.level1}/${props.match.params.level2}/${props.match.params.project}/${props.match.params.stage}/${props.match.params.category}/${props.match.params.version}/${data.groupId}/${data.productCode}/${data.businessType}/${data.freeType}/${data.proType}/${data.pid}/edit`}
                                >
                                  {/* {`${data.groupId}/${data.productCode}/${data.businessType}/${data.freeType}/${data.proType}/${data.pid}/edit`} */}
                                  {data.groupName}/{data.productName}-{data.businessTypeName}-
                                  {data.freeTypeName}-{data.proTypeName}
                                </Select.Option>
                              ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  </Row>
                </Col>
                <Col style={{ margin: '0 0 5px 0' }}>
                  <Button className="yellow-button" onClick={this.showDrawer}>
                    全盘签约概览
                  </Button>
                  <ProjectDetailDrawer
                    title="项目签约计划概览"
                    width={1000}
                    summaryYear={this.state.summaryYear}
                    month={this.state.month}
                    data1={this.state.data1}
                    data2={this.state.data2}
                    currentItem={this.state.currentItem}
                    onClose={this.onClose}
                    visible={this.state.visible}
                  >
                    {this.props.children}
                  </ProjectDetailDrawer>
                </Col>
              </Row>

              <Row>
                {/* ProductTypeDetail-编制新版签约计划~component。 */}
                <Col span={24}>
                  {/* 进入页面的时候初始化业态供货计划数据 组件从redux里拿出数据显示 */}
                  <SupplyPlan />
                </Col>
              </Row>
              {/* SupplyPlan-业态供货计划~component。 */}

              {/* <Card style={{ position: 'absolute', bottom: 0 }}> */}
              <Row span={24}>
                <ProductTypeDetail {...this.props} />
              </Row>
              {/* 按钮 */}
              <Row gutter={[10, 0]} align="middle" justify="center" type="flex">
                <Col>
                  <Button
                    loading={this.state.okLoading}
                    onClick={() => {
                      showConfirm(() => self.handleSavePrice(canSave), '确定要保存签约计划？', '');
                    }}
                    type="primary"
                  >
                    保存
                  </Button>
                </Col>
                <Col>
                  <Button
                    onClick={() =>
                      showConfirm(
                        () => {
                          const {
                            level1,
                            level2,
                            // project,
                            // stage,
                            version,
                            category,
                          } = this.props.match.params;
                          router.push(
                            `/OperatingPlan/ContractPlan/${level1}/${level2}/${project}/${stage}/${category}/${version}`,
                          );
                        },
                        '确定要取消编辑？',
                        '取消后本次编辑内容将不保存。',
                      )
                    }
                  >
                    取消
                  </Button>
                </Col>
              </Row>
            </div>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}
